<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="">
            <el-form :model="query" ref="query" :rules="rules" slot="form" label-width="85px" label-position="right" v-collapse="false">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="申请人类型">
                            <el-select v-model="query.applicateType" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in query.applicateTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发票类型">
                            <el-select v-model="query.type" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in query.typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处理状态">
                            <el-select v-model="query.status" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in query.statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="query.phone" placeholder="请输入手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('query')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                <el-table-column label="申请人类型" align="center" prop="applicateType">
                    <template scope="scope">
                        {{scope.row.applicateType == 0 ? '经销商' : scope.row.applicateType == 1 ? '家长' : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="发票类型" align="center" prop="type">
                    <template scope="scope">
                        {{scope.row.type == 0 ? '电子普票' : scope.row.type == 1 ? '纸质专票' : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="姓名" align="center" prop="payName">
                    <template scope="scope">
                        {{scope.row.payName || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="center" prop="phone">
                    <template scope="scope">
                        {{scope.row.phone || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="发票抬头" align="center" prop="headType">
                    <template scope="scope">
                        {{scope.row.headType ==0?'企业单位' : '个人/非企业单位'}}
                    </template>
                </el-table-column>
                <el-table-column label="税号" align="center" prop="sSchoolName">
                    <template scope="scope">
                        {{scope.row.dutyNumber || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="邮寄地址" align="center" prop="address">
                    <template scope="scope">
                        {{scope.row.address || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="电子邮箱" align="center" prop="email">
                    <template scope="scope">
                        {{scope.row.email || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="申请时间" align="center" prop="createTime">
                    <template scope="scope">
                        {{scope.row.createTime || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="处理状态" align="center" prop="sSchoolName">
                    <template scope="scope">
                        {{scope.row.status == 0 ? '待处理' : scope.row.status == 1 ? '已处理' : scope.row.status == 2 ? '驳回' : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template scope="scope">
                        <el-button v-if="scope.row.status == 0" type="text" class="btn-success" @click="btn(scope.row)">处理</el-button>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <!-- //弹出层 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" size="tiny" >
            <span class="red">电子普票：请确认已发送至用户手机或电子邮箱</span>
            <span class="red m-botton">纸质专票：请确认已办理邮寄。</span>
            <span class="block">确定已处理好发票？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="btnDate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { pagePurchaseInvoices, updatePurchaseInvoices } from 'api/ticket';
import { mapState, mapActions } from 'vuex';
import validate from '@/utils/validate';

export default {
    name: 'serviceAuditList',

    components: { Levelbar, TableLayout },
    data() {
        return {
            dialogVisible: false,
            loading: true,
            tableData: [],
            pageQuery: {
                currentpage: 1,
                total: 0
            },
            query: {
                applicateType: '',
                applicateTypeList: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: '0',
                        label: '经销商'
                    },
                    {
                        value: '1',
                        label: '家长'
                    }
                ],
                type: '',
                typeList: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: '0',
                        label: '电子普票'
                    },
                    {
                        value: '1',
                        label: '纸质专票'
                    }
                ],
                status: '',
                statusList: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: '0',
                        label: '待处理'
                    },
                    {
                        value: '1',
                        label: '已处理'
                    }
          // {
          //     value: '2',
          //     label: '驳回'
          // }
                ]
            },
            dialogId: '',
            dialogStatus: '',
            rules: {
                phone: [...validate.phone()]
            }
        };
    },
    created() {
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate(valid => {
                if (valid) {
                    this.pageQuery.currentpage = 1;
                    this.queryData();
                } else {
                    return false;
                }
            });
        },
        queryData() {
            this.loading = true;
            pagePurchaseInvoices(
        this.query.applicateType,
        this.query.type,
        this.query.status,
        this.query.phone,
        this.pageQuery.currentpage,
        this.config.pageSize
      )
        .then(response => {
            this.loading = false;
            this.tableData = response.data.content.list;
            this.pageQuery.total = response.data.content.pagination.total;
        })
        .catch(() => {
            this.loading = false;
        });
        },

        getSchoolItem(schoolId) {
            this.query.schoolId = schoolId;
        },
        btn(v) {
            this.dialogVisible = true;
            this.dialogId = v.id;
            this.dialogStatus = v.status;
        },
        btnDate() {
            this.dialogVisible = true;
            updatePurchaseInvoices(this.dialogId, this.dialogStatus)
        .then(data => {
            this.dialogVisible = false;
            this.queryData();
        })
        .catch(() => {
            this.dialogVisible = false;
        });
        }
    }
};
</script>

<style lang="scss" scoped>
.red {
  color: #ff0000;
  display: block;
  margin-left: 120px;
  margin-bottom: 10px;
  font-size: 16px;
}
.block {
  display: block;
  text-align: center;
  font-size: 16px;
}
.m-botton {
  margin-bottom: 40px;
}
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  .app-levelbar {
    height: 35px;
  }
}
</style>

